<template>
  <div class="menu-all">
    <div class="menu-list">
      <div class="sel-part">
        <div class="sel-title">您的选择:</div>
        <div class="part-right">
          <div class="sel-tag" v-for="(item, index) in selValue">
            {{ selectList[item.classIndex].className }}:<span class="value">{{
              selectList[item.classIndex].select[item.value].title
            }}</span>
            <div
              class="close-icon thumb"
              title="删除"
              @click="selValue.splice(index, 1)"
            >
              <img :src="publicUrl(`/images/delTag.png`)" />
            </div>
          </div>
        </div>
      </div>
      <div :class="['part', index === selectList.length -1 ? 'last':'not-last' ]" v-for="(item, index) in selectList">
        <div class="part-left line-feed">
          <span class="class-name">{{ item.className }}:</span>
        </div>
        <div class="part-right">
          <span
            v-for="(items, indexs) in item.select"
            class="title thumb"
            @click="clickSel(index, indexs)"
            >{{ items.title }}</span
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts" name="">
import { publicUrl } from "@/utils/util";
import { ref } from "vue";
import {SelectList} from "../../interface"
interface SelValue{
    classIndex: number;
    value: number;
}
interface Props {
    selectList?: Array<SelectList>;
}
const selValue = ref<
  Array<SelValue>
>([]);


const {selectList} = withDefaults(defineProps<Props>(),{
    selectList:()=>[]
});



const initSel = (data:Array<SelValue>)=>{
  selValue.value = [];
  for(let i=0;i<data.length;i++){
      if(selectList[data[i].classIndex] && selectList[data[i].classIndex].select[data[i].value] ){
        //不重复才添加
        selValue.value.push(data[i])
      }
  }
}
defineExpose({initSel});
const clickSel = (classIndex: number, selectIndex: number) => {
  let check: boolean = false;
  for (let i = 0; i < selValue.value.length; i++) {
    if (
      selValue.value[i].classIndex === classIndex &&
      selValue.value[i].value === selectIndex
    ) {
      check = true;
      break;
    }
  }

  if (check === false)
    selValue.value.push({
      classIndex,
      value: selectIndex,
    });
};





</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./index.scss";
}
</style>
